<template>
  <div
    :id="newOption.id"
    :style="{
      width: '230px',
      height: '170px',
    }"
  ></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, toRefs } from 'vue'

let myChart = null
const props = defineProps({
  dataset: Array,
  newOption: Object,
})

onMounted(() => {
  const { dataset, newOption } = toRefs(props)
  myChart = echarts.init(document.getElementById(newOption.value.id))

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    color: [
      '#F0F813',
      'rgba(0,147,255,0.85)',
      '#59DF02',
      'blueviolet',
      'rgb(249,94,86)',
    ],
    series: [
      {
        height: 150,
        left: 38,
        width: 150,
        name: '',
        type: 'pie',
        top: '15',
        radius: ['45%', '70%'],

        avoidLabelOverlap: false,
        // 设置值域的那指向线
        labelLine: {
          show: true, // show设置线是否显示，默认为true，可选值：true ¦ false
          length2: 0,
          length: 13,
        },
        // 设置值域的标签
        label: {
          position: 'outer', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
          // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
          // {a}指series.name  {b}指series.data的name
          // {c}指series.data的value  {d}%指这一部分占总数的百分比
          // alignTo: 'edge',
          // // formatter: '{title|{b}}\n{d}%',
          // edgeDistance: 3,
          avoidLabelOverlap: true,
          // lieHeight: 5,
          // labelLayout: function (params) {
          //   var isLeft = params.labelRect.x < myChart.getWidth() / 2
          //   var points = params.labelLinePoints
          //   // Update the end point.
          //   points[2][0] = isLeft
          //     ? params.labelRect.x
          //     : params.labelRect.x + params.labelRect.width

          //   return {
          //     labelLinePoints: points,
          //   }
          // },
          formatter: (data) => {
            let name = data.name
            // let newName = '';
            // if(name.length>4){
            //     newName = name.substring(0,4)+"\n"+name.substring(4,name.length)
            // }else{
            //     newName = name.substring(0,4)
            // }
            if (newOption.value.isPercent) {
              return (
                '{title|' + name + '}' + '\n' + data.percent.toFixed(0) + '%'
              )
            } else {
              return '{title|' + name + '}' + '\n' + data.value
            }
          },
          textStyle: {
            fontWeight: 300,
            fontSize: 10, //文字的字体大小
            lineHeight: 16,
            color: '#2ad0ff',
          },
          rich: {
            title: {
              color: '#2ad0ff',
              align: 'center',
              fontSize: 10,
            },
          },
          // labelLine: {
          //   length: 100,
          //   length2: 100,
          //   maxSurfaceAngle: 80,
          // },
        },

        // emphasis: {
        //     label: {
        //         show: true,
        //         fontSize: '30',
        //         fontWeight: 'bold'
        //     }
        // },
        data: dataset.value,
      },
    ],
  }
  myChart.setOption(option)
})
</script>
